import { Table, Pagination, message } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom';
import { billRecords } from '@/service';
import { useTranslation } from 'react-i18next';

export default () => {
    const [messageApi, contextHolder] = message.useMessage();
    const { t, i18n } = useTranslation();
    const initState = () => ({
        total: '',
        pageNo: 1,
        pageSize: 10,
        recordList: [],
        loading: false,
        billAmount: 0

    }),
        navigate = useNavigate(),
        [state, setState] = useState(initState);
    const columns = [
        {
            title: t('menu.billList.table.consumptionDate'),
            dataIndex: 'startTime',

        },
        {
            title: t('menu.billList.table.consumptionnumber'),
            dataIndex: 'code',
        },
        {
            title: t('menu.billList.table.consumptioncontent'),
            dataIndex: 'type',
        },
        {
            title: t('menu.billList.table.duration'),
            dataIndex: 'duration',
        },
        {
            title: t('menu.billList.table.consumption'),
            dataIndex: 'cost',
        },
        // {
        //     title: '',
        //     key: 'action',
        //     render: (_, record) => (
        //         <Button
        //             type='primary'
        //             style={{ borderRadius: '20px' }}
        //             onClick={() => goBillDetail(record)}>
        //             Detail
        //         </Button>
        //     )
        // },
    ];
    // const goBillDetail = (record) => {
    //     navigate('/billDetail');
    // }
    const getBillFn = async () => {
        let params = {
            pageNo: state.pageNo,
            pageSize: state.pageSize
        }
        try {
            setState(prevState => ({ ...prevState, loading: true }));
            const res = await billRecords(params);
            const { code, message, data } = res || {};
            if (code === 0) {
                let list = data?.records.map((item, index) => ({ //生成唯一key 
                    ...item,
                    key: `page-${params.pageNo}-item-${index}`
                }))
                setState(o => ({
                    ...o,
                    recordList: list || [],
                    total: data?.total || 0,
                    loading: false,
                    billAmount: data?.extend?.billAmount || 0
                }));
            } else {
                messageApi.open({
                    type: 'error',
                    content: message,
                });
                setState(prevState => ({ ...prevState, loading: false }));
            }
        } catch (error) {
            if (error?.msg) {
                messageApi.open({
                    type: 'error',
                    content: error?.msg,
                });
            }
            setState(prevState => ({ ...prevState, loading: false }));
        }
    };
    const handlePageChange = (page) => {
        setState(prevParams => ({ ...prevParams, pageNo: page }));
    };
    const handlePageSizeChange = (pageNo, pageSize) => {
        setState(prevParams => ({ ...prevParams, pageNo, pageSize }));
    };
    useEffect(() => {
        getBillFn();
    }, [state.pageNo, state.pageSize, i18n.language]);
    return (
        <div className={styles.container}>
            <div className={styles.content}>
                <div className={styles.top}>
                    <div className={styles.num}>
                        <div className={styles.title}>{t('menu.billList.title')}<span className={styles.unit}>{t('menu.billList.unit')}</span></div>
                        <div className={styles.money}>${state?.billAmount}</div>
                    </div>
                </div>
                <div className={styles.bottom}>
                    <Table loading={state.loading} rowKey={'key'} className='custom-table' pagination={false} columns={columns} dataSource={state.recordList} />
                    <div className='custom-Pagination'>
                        <Pagination
                            total={state?.total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(totalNum) => `${t('common.pagination.totalText')} ${totalNum} ${t('common.pagination.itemText')}`}
                            align="center"
                            current={state?.pageNo}
                            defaultPageSize={state?.pageSize}
                            onChange={handlePageChange}
                            onShowSizeChange={handlePageSizeChange}
                        />
                    </div>

                </div>
            </div>
            {contextHolder}
        </div>
    );
}